'use strict';
import React,{Component} from 'react';
import Util from '../../common/util';
import * as URLconstant from '../../constant/URLconstant'
import Header from '../../common/header';
import Swiper from 'react-native-swiper';
import Modal from 'react-native-modalbox';
import ConfirmOrder from '../../order/confirmOrder';//提交订单
import {
    View,
    Text,
    ScrollView,
    StyleSheet,
    Image,
    TouchableOpacity
} from 'react-native';
import MyStroage from "../../common/myStroage";
import Toast from '../../common/ToastUtil';
import Umfx from '../../common/Umfx'
export default class index extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            goodsData:null,
            imgHeightList:[],
            isOpen:false,
            spec_1:'',
            spec_2:'',
            spec_2_list:[],
            buy_num:1,
            pintuan_log_id:0,
            curTime:'',
            isShowList:false,
            ptList:[],
            isShowJoin:false,
            spec_id:'',
            buy_type:1
        };
        this.getPinIndexSuc=this.getPinIndexSuc.bind(this)
          this.errorCallback=this.errorCallback.bind(this)
          this.getListSuc=this.getListSuc.bind(this)
          this.buyRefresh=this.buyRefresh.bind(this)
      }

    componentDidMount() {
        this.getUser()
        this.getCurrentTime()
    }

    componentWillUnmount() {
        this.getTimer&&clearInterval(this.getTimer)
    }

    async getUser(){
        try{
            let userInfoDate = await MyStroage.getStorageAllDataForKey('userinfo')
            LOG('userInfoDate==='+JSON.stringify(userInfoDate))
            if(userInfoDate){
                this.setState({
                    user_id:userInfoDate.data.user_id,
                    tuan_user_id:userInfoDate.data.user_id
                })
                this.getPinIndex()
            }else{
                Toast.show('请先登录')
            }
        }catch (e){

        }
    }

    getCurrentTime(){
        let that = this
        this.getTimer = setInterval(function () {
            let timestamp = parseInt((new Date()).getTime() / 1000)
            LOG('timestamp==='+timestamp)
            that.setState({
                curTime:timestamp,
            })
        },1000)
    }

      getPinIndex(){
          let url = URLconstant.GET_PIN_INDEX
          let datakey=[]
          datakey['pintuan_id'] = this.props.pin_id
          datakey['user_id'] = this.state.user_id
          Util.get(url,datakey,this.getPinIndexSuc,this.errorCallback)
      }
    getPinIndexSuc(datas){
        if(datas.status==0){
            let spec_1_name = datas.data.pintuan_info.spec_1_name
            let spec_2_name = datas.data.pintuan_info.spec_2_name
            let spec_1 = ''
            let spec_2 = ''
            let spec_act_price = datas.data.pintuan_info.act_price
            let spec_price = datas.data.pintuan_info.price
            let spec_stock = datas.data.pintuan_info.stock
            if(spec_1_name!=''){
                spec_1=datas.data.spec_size_color.spec_1[0]
            }
            this.setState({
                goodsData:datas.data,
                spec_1:spec_1,
                spec_price:spec_price,
                spec_act_price:spec_act_price,
                spec_stock:spec_stock
            })
            if(spec_1_name!=''){
                this.getSpec2List(spec_1,datas.data)
            }
            let goods_detail = datas.data.goods_detail
            if(goods_detail!=null){
                this.getImgHeight(goods_detail)
            }
            this.getMoreList()
        }
    }

    getMoreList(){
          let url= URLconstant.MORE_PINTUAN
        let datakey=[]
        datakey['pintuan_id'] = this.props.pin_id
        datakey['user_id'] = this.state.user_id
        Util.get(url,datakey,this.getListSuc,this.errorCallback)
    }
    getListSuc(datas){
          if(datas.status==0){
              let list = datas.data||[]
              this.setState({
                  ptList:list
              })
          }
    }


    errorCallback(err){

    }

    async getImgHeight(urls) {
        try {
            let list = [];
            await urls.map((url, index) => {
                Image.getSize(url, (width, height) => {
                    let imgheight = Util.size.width * height / width;
                    list[index]=imgheight
                    if(list.length==urls.length){
                        this.setState({
                            imgHeightList:list,
                        })
                    }
                }, (error) => {
                    LOG('图片路径错误。。。。。。。。' + error);
                })
            })
        } catch (err) {
            LOG(err);
        }
    }

    showGoodsSwiper(){
        let goodsData = this.state.goodsData
        let img_list = goodsData.image_list
        if(img_list==false||img_list.length==0){
            return false
        } else if(img_list.length==1){
            return(
                <View style={styles.swiper_view}>
                    <Image
                        source={{uri:img_list[0].image_url}}
                        resizeMode={'cover'}
                        style={{width:Util.size.width,height:Util.size.width}}
                    />
                </View>
            )
        }else{
            return(
                <Swiper
                    showsButtons={false}
                    autoplay={true}
                    height={Util.size.width}
                    paginationStyle={{bottom:3,}}
                    autoplayTimeout={5}
                    activeDot={<View style={{backgroundColor: '#f00', width: 12, height: 12, borderRadius: 6, marginLeft: 5, marginRight: 5, marginTop: 5, marginBottom: 5,}} />}
                >
                    {
                        img_list.map((item,index)=>{
                            return(
                                <Image
                                    key={index}
                                    source={{uri:item.image_url}}
                                    resizeMode={'cover'}
                                    style={{width:Util.size.width,height:Util.size.width}}
                                />
                            )
                        })
                    }
                </Swiper>
            )
        }
    }

    showPinNum(quantity){
          let txt
          switch (parseInt(quantity)){
              case 2:
                 txt='二';
                 break;
              case 3:
                  txt='三';
                  break;
              case 4:
                  txt='四';
                  break;
              case 5:
                  txt='五';
                  break;
              case 6:
                  txt='六';
                  break;
              case 7:
                  txt='七';
                  break;
              case 8:
                  txt='八';
                  break;
              default:
                  txt='二'
                  break;
          }
          return (
              <View style={styles.tuan_quantity}>
                  <Text style={{fontSize:12,color:"#fff"}}>{txt}人团</Text>
              </View>
          )
    }

    showGoodsInfo(){
        let goodsData = this.state.goodsData
        return(
            <View style={styles.goods_info_view}>
                <View style={{alignItems:'center',justifyContent:'center',flexDirection:'row'}}>
                    {this.showPinNum(goodsData.pintuan_info.buyer_quantity)}
                    <View style={{flex:1,paddingLeft:10,flexWrap:'wrap',justifyContent:'center'}}>
                        <Text style={{fontSize:14,color:"#333"}}>{goodsData.pintuan_info.goods_name}</Text>
                    </View>
                </View>
                {
                    goodsData.pintuan_info.subtitle?
                        <Text style={{fontSize:12,color:"#969696"}}>{goodsData.pintuan_info.subtitle}</Text>:null
                }
                <Text style={{fontSize:20,color:"#f02b4d"}}>拼团价：¥{goodsData.pintuan_info.act_price}</Text>
                <Text style={{fontSize:12,color:"#969696",textDecorationLine:'line-through'}}>市场价：¥{goodsData.pintuan_info.market_price}</Text>
                <View style={styles.three_rows}>
                    <Text style={{fontSize:12,color:"#969696"}}>销量:{goodsData.sales}</Text>
                    <Text style={{fontSize:12,color:"#969696"}}>库存:{goodsData.pintuan_info.stock}</Text>
                    {
                        goodsData.is_free_shipping==0?
                            <Text style={{fontSize:12,color:"#969696"}}>{goodsData.shippingInfo.shipping_name}{goodsData.shippingInfo.first_price}起</Text>:
                            <Text style={{fontSize:12,color:"#969696"}}>包邮</Text>
                    }
                </View>

            </View>
        )
    }

    //分享拼团到小程序
    toSharePin(item,index){
          this.closeJoinModal()
        let ptUserid,pintuan_log_id,tuan_user_id
        ptUserid=item.user_id
        pintuan_log_id=item.pintuan_log_id
        tuan_user_id=item.tuan_user_id
       let goodsData = this.state.goodsData
       let act_price = goodsData.pintuan_info.act_price
       let path = "/pages/pintuan/pintuanIndex?pt_id=" + this.props.pin_id + "&ptUserid=" + ptUserid+ "&ptId=" + pintuan_log_id +  "&ptIndex=" + index + "&tuan_user_id=" + tuan_user_id + "&buyer_quantity=" + this.state.buy_num  + "&act_price=" + act_price + "&isFromShare=true&isStep=" + 1
       LOG('path==='+path)
        let title = '￥' + act_price + '拼购' + goodsData.pintuan_info.goods_name +',快来参加吧'
        Umfx._smallProductfx(title,path)
    }

    toSharePin2(item,index){
        this.closeJoinModal()
        let ptUserid,pintuan_log_id,tuan_user_id
        ptUserid=item.use_info.tuan_user[0].user_id
        pintuan_log_id=item.use_info.tuan_user[0].pintuan_log_id
        tuan_user_id=item.use_info.tuan_user[0].user_id
        let goodsData = this.state.goodsData
        let act_price = goodsData.pintuan_info.act_price
        let path = "/pages/pintuan/pintuanIndex?pt_id=" + this.props.pin_id + "&ptUserid=" + ptUserid+ "&ptId=" + pintuan_log_id +  "&ptIndex=" + index + "&tuan_user_id=" + tuan_user_id + "&buyer_quantity=" + this.state.buy_num  + "&act_price=" + act_price + "&isFromShare=true&isStep=" + 1
        LOG('path==='+path)
        let title = '￥' + act_price + '拼购' + goodsData.pintuan_info.goods_name +',快来参加吧'
        Umfx._smallProductfx(title,path)
    }

    showGroupList(){
        let goodsData = this.state.goodsData
        let group_user = goodsData.pintuan_info.group_user
        if(group_user==null||group_user==undefined||group_user.length==0){
            return null
        }
        return(
            <View style={styles.group_list_view}>
                <View style={styles.group_list_header}>
                    <Text style={{fontSize:16,color:"#333"}}>拼团列表</Text>
                    <Text onPress={()=>this.setState({isShowList:true})} style={{fontSize:14,color:"#696969"}}>查看更多</Text>
                </View>
                {
                    group_user.map((item,index)=>{
                        if(index<3){
                            return(
                                <View key={index} style={styles.group_item}>
                                    <View style={styles.item_left}>
                                        <Image
                                            source={{uri:item.headimage}}
                                            style={{width:24,height:24,borderRadius:12,marginRight:5}}
                                            resizeMode={'cover'}
                                        />
                                        <Text numberOfLines={1} style={{fontSize:14,color:"#333"}}>{item.nickname}</Text>
                                    </View>
                                    <View style={styles.last_time_view}>
                                        <Text style={{fontSize:12,color:"#333"}}>剩余参团时间：{this.getLastTime(item.end_time)}</Text>
                                        <Text style={{fontSize:12,color:"#696969"}}>还差{item.need_people}人成团</Text>
                                    </View>
                                    {
                                        item.is_join==0?
                                            <TouchableOpacity onPress={()=>this.toJoin(item,index)} style={styles.join_btn}>
                                                <Text style={{fontSize:12,color:"#db1c23"}}>去参团</Text>
                                            </TouchableOpacity>:
                                            <TouchableOpacity style={styles.join_btn} onPress={()=>this.toSharePin(item,index)}>
                                                <Text style={{fontSize:12,color:"#db1c23"}}>去分享</Text>
                                            </TouchableOpacity>
                                    }
                                </View>
                            )
                        }
                    })
                }
            </View>
        )
    }

    toJoin(item,index){
        this.setState({
            buy_type:1,
            pin_index:index,
        })
        let datas={}
        datas.pintuan_id = this.props.pin_id
        datas.tuan_user_id=item.tuan_user_id
        datas.pintuan_log_id = item.pintuan_log_id
        datas.isBuy=false
        this.getPinInfo(datas)
        this.closeListModal()
    }


    getLastTime(end_time){
          let curTime = this.state.curTime
        if(curTime==''){
            curTime=parseInt((new Date()).getTime() / 1000)
        }
        let lastTime
        if(Number.isInteger(end_time)==false){
            if(end_time.indexOf('-')!=-1){
                end_time=parseInt(new Date(end_time.replace(/-/g,'/')).getTime()/1000)
            }
        }
        lastTime = end_time-curTime
        let second = 0
        let minute = 0
        let hour = 0
        let day = 0
        if (lastTime > 60) {
            second = parseInt(lastTime % 60)
            minute = parseInt(lastTime / 60)
            if (minute > 60) {
                hour = parseInt(minute / 60)
                minute = parseInt(minute % 60)
                if (hour > 24) {
                    day = parseInt(hour / 24) //日
                    hour = parseInt(hour % 24) //时
                }
            }
        } else {
            second = lastTime
        }
        hour = hour > 0 ? (hour < 10 ? "0" + hour : hour) : '00'
        minute = minute > 0 ? (minute < 10 ? "0" + minute : minute) : '00'
        second = second > 0 ? (second < 10 ? "0" + second : second) : '00'
        return day>0? day+'天'+hour+":"+minute+":"+second:hour+":"+minute+":"+second
    }


    showGoodsLabel(){
        let goodsData = this.state.goodsData
        if(goodsData.goods_lable==undefined){
            return null
        }
        return(
            <View style={styles.sale_view}>
                {
                    goodsData.goods_lable.map((item,index)=>{
                        return(
                           <View style={[styles.sale_item,index==0?styles.flex_start:(index==1?styles.flex_center:styles.flex_end)]} key={index}>
                                <Image
                                    source={{uri:item.lable_image}}
                                    resizeMode={'cover'}
                                    style={{width:15,height:15,marginRight:5}}
                                />
                                <Text style={{fontSize:12,color:"#696969"}}>{item.lable_name}</Text>
                            </View>
                        )
                    })
                }
            </View>
        )
    }

    showGoodsImage(){
        let goodsData = this.state.goodsData
        let imgHeightList = this.state.imgHeightList
        let goods_detail = goodsData.goods_detail
        if(goods_detail==null||goods_detail==undefined){
            goods_detail=[]
        }
        return(
            <View>
                <View style={styles.img_info_title}>
                    <Text style={{fontSize:12,color:"#999"}}>---上拉继续查看商品详情---</Text>
                </View>
                {
                    goods_detail.map((item,index)=>{
                        return(
                            <Image
                                source={{uri:item}}
                                key={index}
                                style={{width:Util.size.width,height:imgHeightList[index]}}
                                resizeMode={'cover'}
                            />
                        )
                    })
                }
            </View>
        )
    }

    showBuyBtn(){
        let goodsData = this.state.goodsData
          return(
              <View style={styles.buy_btn_view}>
                  <TouchableOpacity onPress={()=>this.setState({isOpen:true,buy_type:0})} style={styles.buy_btn}>
                      <Text style={{fontSize:14,color:"#fff"}}>原价购买</Text>
                      <Text style={{fontSize:14,color:"#fff"}}>¥{goodsData.pintuan_info.price}</Text>
                  </TouchableOpacity>
                  <TouchableOpacity onPress={()=>this.setState({isOpen:true,buy_type:1,pintuan_log_id:0})}  style={styles.group_btn}>
                      <Text style={{fontSize:14,color:"#fff"}}>发起拼团</Text>
                      <Text style={{fontSize:14,color:"#fff"}}>¥{goodsData.pintuan_info.act_price}</Text>
                  </TouchableOpacity>
              </View>
          )
    }

    async selectSpec1(spec){
        await this.setState({
            spec_1:spec
        })
        this.getSpec2List(spec)
    }

    getSpec2List(spec,goodsData){
          if(goodsData==undefined){
              goodsData = this.state.goodsData
          }
        let goods_spec = goodsData.spec_list
        let spec_1_list = goods_spec[spec]
        let spec_2_list = [];
        let spec_2 = ''
        LOG('spec_1_list==='+JSON.stringify(spec_1_list))
        for (let item in spec_1_list) {
            if(item!=''){
                spec_2_list.push(item)
            }
        }
        if(spec_2_list.length==0){
            this.getSpecID(spec_2)
        }else{
            spec_2=spec_2_list[0]

        }
        let stock = spec_1_list[spec_2].stock
        let spec_price=spec_1_list[spec_2].price
        let spec_act_price=spec_1_list[spec_2].pintuan_price
        let spec_id = spec_1_list[spec_2].spec_id
        this.setState({
            spec_2_list: spec_2_list,
            spec_2:spec_2,
            spec_stock:stock,
            spec_price:spec_price,
            spec_act_price:spec_act_price,
            spec_id:spec_id
        })
    }

    selectSpec2(spec_2){
        let goodsData = this.state.goodsData
        let goods_spec = goodsData.spec_list
        let spec_1_list = goods_spec[this.state.spec_1]
        let spec_price=spec_1_list[spec_2].price
        let spec_act_price=spec_1_list[spec_2].pintuan_price
        let stock = spec_1_list[spec_2].stock
        this.setState({
            spec_2:spec_2,
            spec_stock:stock,
            spec_price:spec_price,
            spec_act_price:spec_act_price
        })
        this.getSpecID(spec_2)
    }

    getSpecID(spec_2){
        let goodsData = this.state.goodsData
        let goods_spec = goodsData.spec_list
        let spec_1 = this.state.spec_1
        let spec_id = goods_spec[spec_1][spec_2].spec_id
        this.setState({
            spec_id:spec_id
        })
    }

    addDelNUm(type){
          let buy_num = this.state.buy_num
        let goodsData = this.state.goodsData
        let stock = goodsData.pintuan_info.stock
        if(type=='del'){
              if(buy_num>1){
                  buy_num--
              }
        }else{
              if(buy_num<stock){
                  buy_num++
              }
        }
        this.setState({
            buy_num:buy_num
        })
    }

    showBuyModal(){
        let goodsData = this.state.goodsData
        let buy_type = this.state.buy_type
        let txt = ''
        let price
        if(buy_type==0){
            txt='原价购买'
            price= this.state.spec_price
        }else{
            txt='确定'
            price= this.state.spec_act_price
        }
        return(
            <Modal
                style={styles.buy_modal}
                isOpen={this.state.isOpen}
                position={"bottom"}
                swipeToClose={false}
                backdropPressToClose={false}
                onClosed={() => this.closeModal()}
            >
                <View style={styles.modal_top}>
                    <View style={{width:80,height:80}}>
                        <Image
                            source={{uri:goodsData.pintuan_info.picture}}
                            style={{width:80,height:80}}
                        />
                    </View>
                    <View style={styles.top_price_view}>
                        <Text style={{fontSize:16,color:"#9e0a16"}}>¥{price}</Text>
                        {
                            goodsData.pintuan_info.spec_1_name==''?null:
                            <Text>请选择:{this.state.spec_1} {this.state.spec_2}</Text>
                        }
                        <Text style={{fontSize:12,color:"#969696"}}>库存:{this.state.spec_stock}</Text>
                    </View>
                    <TouchableOpacity onPress={()=>this.closeModal()} style={styles.close_btn_view}>
                        <Image
                            source={require('../../imgs/close.png')}
                            style={{width:20,height:20}}
                            resizeMode={'cover'}
                        />
                    </TouchableOpacity>
                </View>
                <ScrollView style={styles.spec_select_wrap}>
                    {
                        goodsData.spec_goods.length==0||goodsData.spec_goods==false?
                            null
                            :
                            <View>
                                <View style={styles.paddingSpec}>
                                    <Text style={{fontSize:14,color:"#000", marginBottom:10}}>{goodsData.pintuan_info.spec_1_name}</Text>
                                    <View style={styles.spec_select_item_wrap}>
                                        {
                                            goodsData.spec_size_color.spec_1.map((item,index)=>{
                                                return(
                                                    <TouchableOpacity onPress={()=>this.selectSpec1(item)} key={index} style={item==this.state.spec_1?styles.selectSpecItem:styles.specItem}>
                                                        <Text style={{fontSize:12,color:"#fff"}}>{item}</Text>
                                                    </TouchableOpacity>
                                                )
                                            })
                                        }
                                    </View>
                                </View>
                                {
                                    this.state.spec_2_list.length==0?
                                        null:
                                        <View style={styles.paddingSpec}>
                                            <Text style={{fontSize:14,color:"#000", marginBottom:10}}>{goodsData.pintuan_info.spec_2_name}</Text>
                                            <View style={styles.spec_select_item_wrap}>
                                                {
                                                    this.state.spec_2_list.map((item,index)=>{
                                                        return(
                                                            <TouchableOpacity onPress={()=>this.selectSpec2(item)} key={index} style={item==this.state.spec_2?styles.selectSpecItem:styles.specItem}>
                                                                <Text style={{fontSize:12,color:"#fff"}}>{item}</Text>
                                                            </TouchableOpacity>
                                                        )
                                                    })
                                                }
                                            </View>
                                        </View>
                                }
                            </View>
                    }
                </ScrollView>
                <View style={styles.buy_count_view}>
                    <Text style={{fontSize:12,color:"#999"}}>购买数量：</Text>
                    <View style={styles.del_add_view}>
                        <TouchableOpacity onPress={()=>this.addDelNUm('del')} style={styles.del_view}>
                            <Text style={{fontSize:14,color:"#999"}}>-</Text>
                        </TouchableOpacity>
                        <View style={styles.btn_num_view}>
                            <Text style={{fontSize:14,color:"#999"}}>{this.state.buy_num}</Text>
                        </View>
                        <TouchableOpacity onPress={()=>this.addDelNUm('add')} style={styles.del_view}>
                            <Text style={{fontSize:14,color:"#999"}}>+</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <TouchableOpacity style={styles.buy_btn3} onPress={()=>this.toBuy()}>
                    <Text style={{fontSize:14,color:"#fff"}}>{txt}</Text>
                </TouchableOpacity>
            </Modal>
        )
    }

    toBuy(){
        let spec_id = this.state.spec_id
        let goodsData = this.state.goodsData
        if(goodsData.spec_goods.length!=0&&spec_id==''){
            Toast.show('请先选择规格')
            return false
        }
        let goods_id = this.props.goods_id
        let buy_num = this.state.buy_num
        let user_id = this.state.user_id
        let pin_id = this.props.pin_id
        let buy_type = this.state.buy_type
        let tuan_user_id =this.state.tuan_user_id
        let pintuan_log_id =this.state.pintuan_log_id
        this.setState({
            isOpen:false
        })
        if(buy_type==1){
            this.props.navigator.push({
                component:ConfirmOrder,
                passProps:{
                    spec_id:spec_id,
                    pin_id:pin_id,
                    goods_id:goods_id,
                    buy_num:buy_num,
                    user_id:user_id,
                    isPin:buy_type,
                    tuan_user_id:tuan_user_id,
                    pintuan_log_id:pintuan_log_id,
                    buyRefresh:this.buyRefresh
                }
            })
        }else{
            this.props.navigator.push({
                component:ConfirmOrder,
                passProps:{
                    data:{"spec_id":spec_id,"buyNum":buy_num,'goods_id':goods_id},
                    user_id:user_id
                }
            })
        }

    }


    //购买后刷新页面并弹出分享框
    buyRefresh(datas){
          this.getPinIndex()
        this.getPinInfo(datas)
    }

    getPinInfo(datas){
          LOG('datas===='+JSON.stringify(datas))
          let url = URLconstant.JPIN_PINTUAN
        let datakey=[]
        datakey['pintuan_id'] = datas.pintuan_id
        datakey['user_id'] = this.state.user_id
        datakey['tuan_user_id'] = datas.tuan_user_id
        datakey['pintuan_log_id'] = datas.pintuan_log_id
        this.setState({
            pt_index: 0,
            pintuan_log_id: datas.pintuan_log_id,
            pinStatus: 2,
            isBuy:datas.isBuy,
            tuan_user_id:datas.tuan_user_id
        })
        Util.get(url,datakey,this.getJoinSuc.bind(this),this.errorCallback.bind(this))
    }

    getJoinSuc(datas){
          LOG('datas======='+JSON.stringify(datas))
          if(datas.status==0){
              if(datas.data.need_people==0){
                  Toast.show('该拼团人数已满')
              }
              if (datas.data.need_people > 0&&datas.data.use_info!=null) {
                  this.setState({
                      pinData:datas.data,
                      isShowJoin:true
                  })
              }
          }
    }



    closeListModal(){
          this.setState({
              isShowList:false
          })
    }
    closeModal(){
          this.setState({
              isOpen:false
          })
    }

    showMoreModal(){
          let ptList =this.state.ptList
          return(
              <Modal
                isOpen={this.state.isShowList}
                position={'center'}
                style={styles.more_modal}
                onClosed={() => this.closeListModal()}
                swipeToClose={false}
                backdropPressToClose={false}
              >
                <View style={styles.more_header}>
                    <Text style={{fontSize:16,color:"#000"}}>正在拼单</Text>
                    <TouchableOpacity onPress={()=>this.closeListModal()} style={styles.close_btn_view}>
                        <Image
                            source={require('../../imgs/close.png')}
                            style={{width:20,height:20}}
                            resizeMode={'cover'}
                        />
                    </TouchableOpacity>
                </View>
                  <ScrollView style={{flex:1}}>
                      {
                          ptList.map((item,index)=>{
                              return(
                                  <View key={index} style={styles.more_item}>
                                      <Image
                                          source={{uri:item.headimage}}
                                          style={{width:28,height:28,borderRadius:14}}
                                          resizeMode={'cover'}
                                      />
                                      <View style={styles.item_center}>
                                          <Text numberOfLines={1} style={{fontSize:14,color:"#333"}}>{item.nickname}</Text>
                                          <Text style={{fontSize:12,color:"#999"}}>还差{item.need_people}人 剩余{this.getLastTime(item.end_time)}</Text>
                                      </View>
                                      {
                                          item.is_join==0?
                                              <TouchableOpacity onPress={()=>this.toJoin(item,index)} style={styles.join_btn}>
                                                  <Text style={{fontSize:12,color:"#db1c23"}}>去参团</Text>
                                              </TouchableOpacity>:
                                              <TouchableOpacity style={styles.join_btn} onPress={()=>this.toSharePin(item,index)}>
                                                  <Text style={{fontSize:12,color:"#db1c23"}}>去分享</Text>
                                              </TouchableOpacity>
                                      }

                                  </View>
                              )
                          })
                      }
                  </ScrollView>
              </Modal>
          )
    }


    closeJoinModal(){
        this.setState({isBuy:false,isShowJoin:false})
    }

    showJoinModal(){
        let pinData = this.state.pinData
        let isBuy = this.state.isBuy
        if(pinData==undefined){
            return null
        }
          return(
              <Modal
                  position={'center'}
                  isOpen={this.state.isShowJoin}
                  style={styles.join_modal}
                  swipeToClose={false}
                  backdropPressToClose={false}
                  onClosed={() => this.closeJoinModal()}
              >
                  <TouchableOpacity onPress={()=>this.closeJoinModal()} style={styles.close_btn_view}>
                      <Image
                          source={require('../../imgs/close.png')}
                          style={{width:20,height:20}}
                          resizeMode={'cover'}
                      />
                  </TouchableOpacity>
                  <View style={{alignItems:'center'}}>
                      <Text style={{fontSize:18,color:"#333",marginBottom:8}}>参与{pinData.use_info.tuan_user[0].nickname}的拼团</Text>
                      <Text>仅剩{pinData.need_people}个名额,{this.getLastTime(pinData.end_time)}后结束</Text>
                  </View>
                  <View style={styles.headimage_view}>
                      {
                          pinData.use_info.tuan_user.map((item,index)=>{
                              return(
                                  <View style={styles.mine_headimage} key={index}>
                                      <Image
                                          source={{uri:item.headimage}}
                                          resizeMode={'cover'}
                                          style={{width:20,height:20,borderRadius:10}}
                                      />
                                      {
                                          index==0?
                                              <View style={styles.master_view}>
                                                  <Text style={{fontSize:10,color:"#fff"}}>拼主</Text>
                                              </View>:null
                                      }

                                  </View>
                              )
                          })
                      }

                      {this.backHeadimage(pinData.need_people)}
                  </View>
                  {
                      isBuy?
                          <TouchableOpacity style={styles.join_pin_btn} onPress={()=>this.toSharePin2(pinData,0)}>
                              <Text style={{fontSize:16,color:"#fff"}}>去分享</Text>
                          </TouchableOpacity>:
                          <TouchableOpacity style={styles.join_pin_btn} onPress={()=>this.setState({isShowJoin:false,isOpen:true})}>
                              <Text style={{fontSize:16,color:"#fff"}}>参与拼单</Text>
                          </TouchableOpacity>
                  }
              </Modal>
          )
    }


    backHeadimage(num){
          let list = []
        let rows
        for(let i=0;i<num;i++){
              rows=(
                  <View style={[styles.mine_headimage,styles.dashed_border]} key={i}>
                    <Text style={{color:'#8e8e8e',fontSize:20}}>?</Text>
                  </View>
              )
            list.push(rows)
        }
        return list
    }



      render(){
          return(
              <View style={{flex:1,backgroundColor:"#f0f0f0"}}>
                  <Header navigator={this.props.navigator} initObj={{ title: '拼团详情',id:2}}/>
                  {
                      this.state.goodsData==null?
                          <View style={{flex:1}}>
                              {Util.loading()}
                          </View>
                          :
                          <View style={{flex:1}}>
                            <ScrollView style={{flex:1}}>
                                {this.showGoodsSwiper()}
                                {this.showGoodsInfo()}
                                {this.showGroupList()}
                                {this.showGoodsLabel()}
                                {this.showGoodsImage()}
                            </ScrollView>
                              {this.showBuyBtn()}
                              {this.showBuyModal()}
                              {this.showMoreModal()}
                              {this.showJoinModal()}
                          </View>
                  }
              </View>
          )
      }
}
var styles = StyleSheet.create({
    swiper_view:{
        width:Util.size.width,
        height:Util.size.width
    },
    goods_info_view:{
        backgroundColor:"#fff",
        padding:10,
    },
    tuan_quantity:{
        height:24,
        paddingHorizontal:10,
        borderRadius:12,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:"#f02b4d",
    },
    three_rows:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        paddingTop:10
    },
    sale_view:{
        flexDirection:'row',
        alignItems:'center',
        marginTop:10,
        height:40,
        backgroundColor:"#fff",
        paddingHorizontal:10
    },
    sale_item:{
        flexDirection:'row',
        alignItems:'center',
        width:(Util.size.width-20)/3,
    },
    flex_start:{
        justifyContent:'flex-start'
    },
    flex_center:{
        justifyContent:'center'
    },
    flex_end:{
        justifyContent:'flex-end'
    },
    img_info_title:{
        alignItems:'center',
        justifyContent:'center',
        padding:10,
    },
    buy_btn_view:{
        height:45,
        flexDirection:'row'
    },
    buy_btn:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:"#ff8d43",
        height:45,
    },
    group_btn:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:"#f02b4d",
        height:45,
    },
    buy_modal:{
        width:Util.size.width,
        height:Util.size.height/3*2,
        backgroundColor:"#fff"
    },
    modal_top:{
        padding:10,
        flexDirection:'row'
    },
    top_price_view:{
        paddingHorizontal:10,
        justifyContent:'space-between',
        flex:1,
    },
    spec_select_wrap:{
        flex:1,
    },
    spec_select_item_wrap:{
        flexDirection:'row',
        flexWrap:'wrap',
    },
    paddingSpec:{
        padding:10,
        borderTopWidth:1,
        borderTopColor:"#e0e0e0"
    },
    selectSpecItem:{
        alignItems:'center',
        justifyContent:'center',
        paddingHorizontal:10,
        height:25,
        borderRadius:5,
        marginHorizontal:10,
        marginVertical:5,
        backgroundColor:"#f02b4d"
    },
    specItem:{
        alignItems:'center',
        justifyContent:'center',
        paddingHorizontal:10,
        height:25,
        borderRadius:5,
        marginHorizontal:10,
        marginVertical:5,
        backgroundColor:"#ccc"
    },
    buy_btn3:{
        width:Util.size.width,
        height:40,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:"#f02b4d"
    },
    buy_count_view:{
        flexDirection:"row",
        alignItems:'center',
        marginTop:10,
        marginBottom:10,
        paddingHorizontal:10
    },
    del_add_view:{
        marginLeft:10,
        flexDirection:'row',
        borderWidth:1,
        borderColor:"#ddd"
    },
    del_view:{
        width:25,
        height:25,
        backgroundColor:"#ecebeb",
        alignItems:'center',
        justifyContent:'center'
    },
    btn_num_view:{
        width:45,
        height:25,
        alignItems:'center',
        justifyContent:'center'
    },
    group_list_view:{
        marginTop:10,
        backgroundColor:"#fff",
    },
    group_list_header:{
        height:40,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:"space-between",
        paddingHorizontal:10
    },
    group_item:{
        flexDirection:"row",
        height:50,
        alignItems:'center',
        borderTopWidth:1,
        borderTopColor:"#e0e0e0",
        paddingHorizontal:10
    },
    last_time_view:{
        flex:1,
        flexDirection:'column',
        alignItems:'flex-end',
        justifyContent:'center'
    },
    item_left:{
        width:80,
        flexDirection:"row",
        alignItems:'center',
        marginRight:10
    },
    join_btn:{
        width:50,
        height:22,
        borderWidth:1,
        borderColor:"#db1c23",
        borderRadius:5,
        marginLeft:10,
        alignItems:'center',
        justifyContent:'center'
    },
    more_modal:{
        width:Util.size.width*0.7,
        height:Util.size.height*0.7,
        backgroundColor:"#fff",
        padding:10,
        paddingTop:0,
        borderRadius:5,
    },
    more_header:{
        height:40,
        alignItems:'center',
        justifyContent:'center',
        borderBottomWidth:1,
        borderBottomColor:"#e0e0e0"
    },
    more_item:{
        padding:10,
        flexDirection:'row',
        alignItems:'center',
        borderBottomWidth:1,
        borderBottomColor:"#e0e0e0"
    },
    item_center:{
        flex:1,
        paddingHorizontal:10
    },
    close_btn_view:{
        position:'absolute',
        top:10,
        right:10
    },
    join_modal:{
        width:Util.size.width*0.8,
        paddingVertical:15,
        backgroundColor:"#fff",
        borderRadius:10,
        borderWidth:1,
        borderColor:"#e0e0e0",
        alignItems:'center',
        justifyContent:'center',
        height:160
    },
    headimage_view:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        marginVertical:8,
    },
    mine_headimage:{
        width:30,
        height:30,
        alignItems:'center',
        justifyContent:'center',
        borderRadius:15,
        borderWidth:1,
        borderColor:"#ff5b01",
        marginHorizontal:5
    },
    dashed_border:{
        borderColor:"#8e8e8e"
    },
    join_pin_btn:{
        width:Util.size.width*0.64,
        height:40,
        borderRadius:5,
        backgroundColor:"#db1c23",
        alignItems:'center',
        justifyContent:'center'
    },
    master_view:{
        position:'absolute',
        top:0,
        left:0,
        backgroundColor:"#ff5b01",
        alignItems:'center',
        justifyContent:'center',
        borderRadius:5
    }

})